<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="static/css/bootstrap-datetimepicker.css"></link>
    <script src="static/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap.min.js"></script>
    <script src="static/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
</head>
<body>
    <!--<h1>${message}</h1>-->
    <h1 th:text="${message}">我是标题</h1>
    <div class="row">
        <div class="col-lg-6">
            <form action="list" method="post" class="form-inline" id="searchForm">
                <input type="hidden" name="pageNum" id="pn">
                <div class="form-group">
                    <label>账号类型</label>
                    <select class="form-control"  name="typeId" >
                        <option value="">请选择</option>
                        <!--<c:forEach items="${types}" var="t"><option value=${t.id}>${t.name}</option></c:forEach>-->
                        <option th:each="t:${types}" th:value="${t.id}" th:text="${t.name}" th:selected="${param.typeId !=null} and ${t.id}==${param.typeId[0]}"></option>
                    </select>
                </div>
                <div class="form-group">
                    <label>公众号/名称</label>
                    <input type="text" class="form-control" name="keyword" placeholder="公众号或名称" th:value="${param.keyword}">
                </div>
                <div class="form-group span6">
                    <label>创建时间</label>
                    <input class="form-control" size="10" type="text" name="startDate" id="startTime"  th:value="${param.startDate}"> -
                    <input class="form-control" size="10" type="text"  name="endDate" id="endTime"  th:value="${param.endDate}">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn">查询</button>
                </div>
            </form>
            <table class="table table-striped table-bordered" style="margin-top:20px">
                <tr>
                    <td>ID</td>
                    <td>公众号</td>
                    <td>名称</td>
                    <td>类型</td>
                    <td>创建时间</td>
                    <td>认证</td>
                    <td>操作</td>
                </tr>
                <tr th:each="a:${pageInfo.list}">
                    <td th:text="${a.id}"></td>
                    <td th:text="${a.account}"></td>
                    <td th:text="${a.name}"></td>
                    <td th:text="${a.type.name}"></td>
                    <td th:text="${#dates.format(a.createdDate, 'yyyy-MM-dd')}"></td>
                    <td th:text="${a.status ==1?'已认证':'未认证'}"></td>
                    <td><a th:href="@{go_update?id={id} (id=${a.id})}">修改</a></td>
                </tr>
            </table>
            <ul class="pagination">
                <!--不可点击的样式-->
                <li th:class="${pageInfo.hasPreviousPage?'':'disabled'}"><a href="#" onclick="changePage(1)">首页</a></li>
                <li th:class="${pageInfo.hasPreviousPage?'':'disabled'}"><a href="#" th:onclick="@{changePage({pn}) (pn=${pageInfo.prePage})}">上一页</a></li>
                <li th:each="n:${pageInfo.navigatepageNums}" th:class="${n==pageInfo.pageNum?'active':''}"><a href="#" th:text="${n}" th:onclick="@{changePage({pn}) (pn=${n})}">1</a></li>
                <!--当前页-->
                <li th:class="${pageInfo.hasNextPage?'':'disabled'}"><a href="#" th:onclick="@{changePage({pn}) (pn=${pageInfo.nextPage})}">下一页</a></li>
                <li th:class="${pageInfo.hasNextPage?'':'disabled'}"><a href="#" th:onclick="@{changePage({pn}) (pn=${pageInfo.pages})}">末页</a></li>
            </ul>
        </div>
    </div>
    <script>
        $(function () {
            $('#startTime').datetimepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                minView: 2
            });
            $('#endTime').datetimepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                minView: 2
            });
        })
        function changePage(pn){
            $("#pn").val(pn)
            $("#searchForm").submit();
        }
    </script>
</body>
</html>